/* Espaço CR1PT0   lat -30.0417169, lng -51.2211564 */

var estabelecimento = L.icon({
  iconUrl: './leaflet/images/marker-icon-2x-velivery-laranja.png',
  shadowUrl: './leaflet/images/marker-shadow.png',
  iconSize:     [62, 82], // size of the icon
  shadowSize:   [62, 82], // size of the shadow
  iconAnchor:   [34, 82], // point of the icon which will correspond to marker's location
  shadowAnchor: [22, 92],  // the same for the shadow
//  popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

var estabelecimentos = L.layerGroup();

var estabelecimento_cr1pt0 = L.marker([-30.0417169, -51.2211564], {icon: estabelecimento})
.bindPopup("Espaço CR1PT0<br />Alimentarte<br />Sushi do Bem<br />B Burger")
.addTo(estabelecimentos);
var estabelecimento_mrx = L.marker([-30.041834, -51.22133], {icon: estabelecimento})
.bindPopup("Mr. X")
.addTo(estabelecimentos);
var estabelecimento_sofalafel = L.marker([-30.039154, -51.219833], {icon: estabelecimento})
.bindPopup("Só Falafel")
.addTo(estabelecimentos);
var estabelecimento_pugg = L.marker([-30.033181, -51.215236], {icon: estabelecimento})
.bindPopup("Pugg Hot Dog")
.addTo(estabelecimentos);

var bikeentregas = L.layerGroup();

var area_bikeentrega = L.polygon([
    [-30.033273, -51.240696],
    [-30.030775, -51.238883],
    [-30.019627, -51.216674],
    [-30.017825, -51.197619],
    [-30.022322, -51.195409],
    [-30.028583, -51.19454],
    [-30.040406, -51.194444],
    [-30.048343, -51.196375],
    [-30.052692, -51.204722],
    [-30.060842, -51.219635],
    [-30.059378, -51.230729],
    [-30.04226, -51.236136],
    [-30.041388, -51.241157],
    [-30.041388, -51.241157]
  ],
  {
    color: 'orange'
  }
)
.addTo(bikeentregas)
.bindPopup("Área de entregas de bike para o piloto em Porto Alegre no Velivery.");

var atribuicao = 'Dados de mapas &copy; contribuidora(e)s do <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, ' +
  '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  'Imagery © <a href="https://thunderforest.com/">Thunderforest</a>, ' +
  'Dados climáticos obtidos através do <a href="https://notabug.org/velivery/climobike">ClimoBike</a>. ' +
  'Powered com <a href="http://souvegetariano.com">&hearts;</a> e <a href="https://notabug.org/velivery/velivery_maps">liberdade</a> by <a href="http://velivery.com.br">Velivery</a>';

var thunderforest_url = 'https://tile.thunderforest.com/{id}/{z}/{x}/{y}{r}.png?apikey=067405a5c15b424b9ef878925713fd42';

var thunderforest = L.layerGroup();

var thunderforest_cycle = L.tileLayer(thunderforest_url, {id: 'cycle', attribution: atribuicao}).addTo(thunderforest);
var thunderforest_transport = L.tileLayer(thunderforest_url, {id: 'transport', attribution: atribuicao}).addTo(thunderforest);
var thunderforest_landscape = L.tileLayer(thunderforest_url, {id: 'landscape', attribution: atribuicao}).addTo(thunderforest);
var thunderforest_outdoors = L.tileLayer(thunderforest_url, {id: 'outdoors', attribution: atribuicao}).addTo(thunderforest);
var thunderforest_transport_dark = L.tileLayer(thunderforest_url, {id: 'transport-dark', attribution: atribuicao}).addTo(thunderforest);
var thunderforest_spinal_map = L.tileLayer(thunderforest_url, {id: 'spinal-map', attribution: atribuicao}).addTo(thunderforest);
var thunderforest_pioneer = L.tileLayer(thunderforest_url, {id: 'pioneer', attribution: atribuicao}).addTo(thunderforest);
var thunderforest_mobile_atlas = L.tileLayer(thunderforest_url, {id: 'mobile-atlas', attribution: atribuicao}).addTo(thunderforest);
var thunderforest_neighbourhood = L.tileLayer(thunderforest_url, {id: 'neighbourhood', attribution: atribuicao}).addTo(thunderforest);

var climobike = L.layerGroup();

new L.GeoJSON(climobike_dados,
  {
    pointToLayer: function (feature, latlng) {
      return L.circleMarker(latlng, {
        radius: 8,
        fillColor: "#8ae234",
        color: "#4e9a06",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
      });
    },
    onEachFeature: function (feature, layer) {
      layer.bindPopup(
        '<h2>Dados ClimoBike</h2>'
        + '<ul>'
        + '<li>Vers&atilde;o: '
        + feature.properties.climobike
        + '</li>'
        + '<li>Data de aquisi&ccedil;&atilde;o: '
        + feature.properties.time
        + '</li>'
        + '<li>Coordenadas: '
        + feature.properties.lat
        + ', '
        + feature.properties.long
        + '</li>'
        + '<li>Mon&oacute;xido de carbono: '
        + feature.properties.CO
        + '</li>'
        + '<li>Gases t&oacute;xicos: '
        + feature.properties.NH3
        + '</li>'
        + '<li>Metano: '
        + feature.properties.CH4
        + '</li>'
        + '<li>Temperatura: '
        + feature.properties.temp
        + '</li>'
        + '<li>Umidade relativa do ar: '
        + feature.properties.hum
        + '</li>'
        + '<li>Luminosidade: '
        + feature.properties.ldr
        + '</li>'
        + '</ul>'
      );
    }
  }
)
.addTo(climobike);

var mapa_velivery = L.map('mapa_velivery', {
  center: [-30.0417169, -51.2211564],
  zoom: 14,
  maxZoom: 18,
  layers: [
    thunderforest_neighbourhood,
    thunderforest_cycle,
    estabelecimentos,
    bikeentregas,
    climobike
  ]
});

var baseLayers = {
  "Thunderforest Cycle": thunderforest_cycle,
  "Thunderforest Transport": thunderforest_transport,
  "Thunderforest Landscape": thunderforest_landscape,
  "Thunderforest Outdoors": thunderforest_outdoors,
  "Thunderforest Transport Dark": thunderforest_transport_dark,
  "Thunderforest Spinal Map": thunderforest_spinal_map,
  "Thunderforest Pioneer": thunderforest_pioneer,
  "Thunderforest Mobile Atlas": thunderforest_mobile_atlas,
  "Thunderforest Neighbourhood": thunderforest_neighbourhood
};

var overlays = {
  "Estabelecimentos Velivery": estabelecimentos,
  "Área Velivery Bike Entregas": bikeentregas,
  "ClimoBike": climobike
};

var control_velivery = L.control.layers(baseLayers, overlays).addTo(mapa_velivery);

var popup = L.popup();

function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("Posição: " + e.latlng.toString())
    .openOn(mapa_velivery);
}

mapa_velivery.on('click', onMapClick);

//var geojsonFeature = {
//    "type": "Feature",
//    "properties": {
//        "name": "Coors Field",
//        "amenity": "Baseball Stadium",
//        "popupContent": "This is where the Rockies play!"
//    },
//    "geometry": {
//        "type": "Point",
//        "coordinates": [-30.033181, -51.24]
//    }
//};

//var geojsonMarkerOptions = {
//    radius: 8,
//    fillColor: "#ff7800",
//    color: "#000",
//    weight: 1,
//    opacity: 1,
//    fillOpacity: 0.8
//};

//L.geoJSON(geojsonFeature, {
//    pointToLayer: function (geojsonFeature, [-30.033181, -51.24]) {
//        return L.circleMarker([-30.033181, -51.24], geojsonMarkerOptions);
//    }
//}).addTo(mapa_velivery);

